<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pipeline Bootstrap 4.0 Theme</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400">   <!-- Google web font "Open Sans", https://fonts.google.com/ -->
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">           <!-- Font Awesome, http://fontawesome.io/ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                 <!-- Bootstrap style, http://v4-alpha.getbootstrap.com/ -->
    <link rel="stylesheet" href="css/magnific-popup.css">                                <!-- Magnific pop up style, http://dimsemenov.com/plugins/magnific-popup/ -->
    <link rel="stylesheet" href="css/templatemo-style.css">                              <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
      </head>

      <body>
        <div class="container-fluid">

            <section id="welcome" class="tm-content-box tm-banner margin-b-10">
                <div class="tm-banner-inner">
                    <h1 class="tm-banner-title">tourism</h1>                        
                </div>                    
            </section>

            <div class="tm-body">
                <div class="tm-sidebar">
                    <nav class="tm-main-nav">
                        <ul class="tm-main-nav-ul">
                            <li class="tm-nav-item"><a href="#welcome" class="tm-nav-item-link tm-button">
                                <i class="fa fa-smile-o tm-nav-fa"></i>brief introduction</a>
                            </li>
                            <li class="tm-nav-item"><a href="#gallery" class="tm-nav-item-link tm-button">
                                <i class="fa fa-image tm-nav-fa"></i>Theme</a>
                            </li>
                            <li class="tm-nav-item"><a href="#services" class="tm-nav-item-link tm-button">
                                <i class="fa fa-tasks tm-nav-fa"></i>Attractions</a>
                            </li>
                            <li class="tm-nav-item"><a href="#about" class="tm-nav-item-link tm-button">
                                <i class="fa fa-sitemap tm-nav-fa"></i>Entertainment</a>
                            </li>
                            <li class="tm-nav-item"><a href="#contact" class="tm-nav-item-link tm-button">
                                <i class="fa fa-envelope-o tm-nav-fa"></i>Welcome</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <div class="tm-main-content">
                    
                    <div class="tm-content-box tm-content-box-home">                        
                        <img src="https://ps.ssl.qhmsg.com/sdr/400__/t01724a0fde49f9ab59.jpg" alt="Image 1" class="img-fluid tm-welcome-img">                        
                        <div class="tm-welcome-boxes-container">
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">introduction</h2>
                                    <p>Shanghai Disneyland, located in Chuansha New Town, Pudong New Area, Shanghai, officially opened on June 16,2016."</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">Learn More</a>
                            </div>
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">Seven theme parks</h2>
                                    <p>Mickey Street, Wondering Garden, Adventure Island, Treasure Bay, Tomorrow World, Dream World, Toys Park.</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">Read Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>
                        
                    <div id="gallery" class="tm-content-box">                        
                        <div class="grid tm-gallery">
                            <figure class="effect-bubba">
                                <img src="http://pic104.nipic.com/file/20160719/9129085_091557629000_2.jpg" alt="Image 8" class="img-fluid">
                                <figcaption>
                                    <h2><span>明日世界</span></h2>
                                    <p>创极速光轮，巴基光年星际营救，漫威英雄总部</p>
                                    <a href "http://pic104.nipic.com/file/20160719/9129085_091557629000_2.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="http://www.chinadaily.com.cn/dfpd/sh/attachement/jpg/site1/20110408/0023ae602b2a0f08d90c2d.jpg" alt="Image 7" class="img-fluid">
                                <figcaption>
                                    <h2><Span>米奇大街</span</h2>
                                    <p>欢乐广场花园广场奇想花园市集区</p>
                                    <a href="http://www.chinadaily.com.cn/dfpd/sh/attachement/jpg/site1/20110408/0023ae602b2a0f08d90c2d.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="http://img1.cache.netease.com/catchpic/4/41/41A7F03DC33BF96BB769A1F37563A009.jpg" alt="Image 5" class="img-fluid">
                                <figcaption>
                                    <h2><span>宝藏湾</span></h2>
                                    <p>加勒比海盗——沉落宝藏之战，船奇戏水滩</p>
                                    <a href="http://img1.cache.netease.com/catchpic/4/41/41A7F03DC33BF96BB769A1F37563A009.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="http://y3.ifengimg.com/news_spider/dci_2013/12/30200971640c963e3cc1c13c635f6fc0.jpg" alt="Image 3" class="img-fluid">
                                <figcaption>
                                    <h2><span>奇想花园</span></h2>
                                    <p>十二朋友园，音悦园浪漫园，碧林园，妙羽园幻想曲园，童话城堡园</p>
                                    <a href="http://y3.ifengimg.com/news_spider/dci_2013/12/30200971640c963e3cc1c13c635f6fc0.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="http://m.tuniucdn.com/fb2/t1/G4/M00/75/80/Cii-VVnPBFyIBKWnAAKspc5omwoAABwSQHO348AAqy9486_w640_h480_c1_t0.jpg" alt="Image 2" class="img-fluid">
                                <figcaption>
                                    <h2><span>探险岛</span></h2>
                                    <p>雷鸣山漂流，古迹探索营，翱翔.飞越地平线</p>
                                    <a href= "https://ps.ssl.qhmsg.com/sdr/400__/t01937138d5c2dcc185.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1607/12/c13/24096239_1468330743028_mthumb.jpg" alt="Image 4" class="img-fluid">
                                <figcaption>
                                    <h2><span>梦幻世界</span></h2>
                                    <p>迎宾阁，”奇幻童话城堡“日间舞台秀，”点亮奇梦“夜光幻影秀</p>
                                    <a href= "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1607/12/c13/24096239_1468330743028_mthumb.jpg">View more</a>
                                </figcaption>
                            </figure>                                
                        </div>
                    </div>

                    <div id="services" class="tm-content-box tm-gray-bg tm-services">

                        <div class="tm-services-img-container">
                            <img src="https://p1.ssl.qhmsg.com/t0186ccaf34ede0da49.png" alt="Green Field" class="img-fluid tm-services-img">    
                        </div> 
                            
                        <div class="tm-box-pad tm-services-description-container">
                            <h2 class="tm-section-title">Vivamus eget convallis tellus</h2>
                            <p class="tm-section-description">"Fantasy Fairy Tale Castle" is not only the tallest building in Shanghai Disneyland, but also the tallest, largest and most interactive Disney Castle in the world. </p>
                        <p class="tm-section-description"> It will become the most eye-catching landmark in the park. Located in the heart of the Shanghai Disneyland, the magnificent "Fantasy Fairy Castle" will provide visitors with a variety of immersive experiences: elegant restaurant ordering, popular "Fun Change Salon", and other shopping and entertainment facilities.</p> 
                            <p class="tm-section-description">Unlike other Disney castles built for a princess, "Fantasy Fairy Castle" will gather for the first time each princess born from Disney's rich and meaningful tradition</p>   
                        </div>                                              
                        
                    </div>

                    <!-- slider -->
                    <div id="about" class="tm-content-box">
                        <div class="tm-box-pad tm-bordered-box">
                            <h2 class="tm-section-title">Mauris sollicitudin a nibh ut sollicitudin</h2>
                            <p>Pellentesque quam libero, hendrerit pretium feugiat sed, rhoncus ac nunc. Etiam eget dui vel ex eleifend mattis eget vitae risus. Nullam eu libero sit amet quam finibus condimentum. Aenean vulputate dictum suscipit. Morbi efficitur erat nulla, id tempor mi accumsan sed.</p>
                            <a href="#" class="tm-button tm-button-normal">Read More</a>
                        </div>
                        <div class="tm-flex">
                            <div class="tm-purple-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">The "dream world" "snow and ice: singing festival"</h2>
                                <p>In the "Forest Theater",the audience will follow the friends in "Snow and Snow" and the villagers of Alundaier to share the story,sing and sing,and feel the ice and snow interactive performance full of joy.</p>
                            </div>
                            <div class="tm-gray-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">Aenean vulputate dictum</h2>
                                <p>Two festival guides from Alundaier will host the festival and introduce everyone to the musical.The famous Elsa,Anna and Christopher will also join the event and welcome visitors of all ages to sing with their favorite "Ice and Snow" music.</p>
                            </div>    
                        </div>                        
                    </div>

                    <section id="contact" class="tm-content-box">

                        <div class="tm-flex">
                            <div class="tm-contact-left-half tm-gray-bg">
                                <div class="tm-contact-inner-pad">
                                    <h2 class="tm-section-title">Contact Us</h2>
                                    <form action="#contact" method="post" class="contact-form">

                                        <div class="form-group">
                                            <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
                                        </div>
                                        <div class="form-group">
                                            <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
                                        </div>
                                        <div class="form-group">
                                            <textarea id="contact_message" name="contact_message" class="form-control" rows="9" placeholder="Message" required></textarea>
                                        </div>
                                        
                                        <button type="submit" class="btn btn-primary pull-xs-right tm-button tm-button-normal">Submit</button>

                                    </form>
                                </div>                                
                            </div>

                            <div class="tm-contact-right-half tm-purple-bg">
                                <div class="tm-address-box">
                                    <h2 class="tm-section-title"> Opening time</h2>
                                    <time>At 12 noon on June 16, 2016Portable unopened food<br>
                                             Shanghai Disneyland officially opened its park<br>
                                             Portable unopened food
                                    </time>

									
									<h3 class="tm-section-title"> Address</h3>
									<address>Shanghai Pudong New Area Chuansha New Town</address>
                                </div>                                
                                <div id="">map</div>
                            </div>
                        </div>
                        
                    </section>  

                    <footer class="tm-footer">
                        <p class="text-xs-center">Copyright &copy; 2016 Your Company | More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                    </footer>

                </div>
            </div>             
        </div>
        
        <!-- load JS files -->
        
        <script src="js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="js/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
        <script src="js/jquery.magnific-popup.min.js"></script>     <!-- Magnific pop-up (http://dimsemenov.com/plugins/magnific-popup/) -->
        <script src="js/jquery.singlePageNav.min.js"></script>      <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
        
        <!-- Templatemo scripts -->
        <script>  

        

        function setNavbar() {
            if ($(document).scrollTop() > 160) {
                $('.tm-sidebar').addClass('sticky');
            } else {
                $('.tm-sidebar').removeClass('sticky');
            }
        }                   
    
        $(document).ready(function(){
            
            // Single page nav
            $('.tm-main-nav').singlePageNav({
                'currentClass' : "active",
                offset : 20
            });

            // Detect window scroll and change navbar
            setNavbar();
            
            $(window).scroll(function() {
              setNavbar();
            });

            // Magnific pop up
            $('.tm-gallery').magnificPopup({
              delegate: 'a', // child items selector, by clicking on it popup will open
              type: 'image',
              gallery: {enabled:true}
              // other options
            });
         
        });
    
        </script>             

    </body>
    </html>